<style type="text/css">
    .flex-row {
        display: flex;
        align-items: center;
    }

    .list-con {
        height: 338px;
        margin-bottom: 30px;
    }

    .list-con-header {
        background-color: #4dbe2e;
        height: 96px;
        padding: 24px;
        color: #fff;
        position: relative;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;

    }

    .list-con-header-xcx {
        background: #605ab0;
    }

    .list-con-header-h5 {
        background-color: #fb6b40;
    }

    .list-con-header-app {
        background-color: #51a4ff;
    }

    .list-con-header-info {
        background: linear-gradient(left, #33e3b9, #23c29c);
        background: -ms-linear-gradient(left, #33e3b9, #23c29c);
        background: -webkit-linear-gradient(left, #33e3b9, #23c29c);
        background: -moz-linear-gradient(left, #33e3b9, #23c29c);

    }
    .list-con-header-share {
        background: linear-gradient(left, #E2B0FF,#9F44D3);
        background: -ms-linear-gradient(left, #E2B0FF,#9F44D3);
        background: -webkit-linear-gradient(left, #E2B0FF,#9F44D3);
        background: -moz-linear-gradient(left, #E2B0FF,#9F44D3);

    }
    .list-con-header-score{
        background: linear-gradient(left, #F7B754,#FF5F2D);
        background: -ms-linear-gradient(left, #F7B754,#FF5F2D);
        background: -webkit-linear-gradient(left, #F7B754,#FF5F2D);
        background: -moz-linear-gradient(left, #F7B754,#FF5F2D);
    } 
    .list-con-header-withdraw{
        background: linear-gradient(left, #FD778A,#FF4660);
        background: -ms-linear-gradient(left,  #FD778A,#FF4660);
        background: -webkit-linear-gradient(left,  #FD778A,#FF4660);
        background: -moz-linear-gradient(left,  #FD778A,#FF4660);
    }

    .title-img {
        position: absolute;
        bottom: -30px;
        right: -15px;
    }

    .list-con .title {
        font-size: 24px;
        line-height: 24px;
        margin-bottom: 14px;
        display: flex;
        justify-content: space-between;

    }

    .title-edit {
        font-size: 12px;
    }

    .list-con .title em {
        display: inline-block;
        height: 18px;
        line-height: 18px;
        padding: 0 6px;
        font-size: 12px;
        border-radius: 9px;
        font-style: italic;
        background-color: #41aa24;
        margin-left: 5px;
    }

    .list-con-header-xcx .title em {
        background: #433e8c
    }

    .list-con-header-h5 .title em {
        background-color: #ea6c48;
    }

    .list-con-header-app .title em {
        background-color: #117adc;
    }

    .list-con-body {
        padding: 28px 20px 24px;
        height: 250px;
        border: 1px solid #eee;
        text-align: center;
    }

    .list-con-bodyzf {
        height: 120px;
    }


    
    .body-con {
        height: 140px;
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        justify-content: center;
    }

    .body-btn {

        border-top: none;
        text-align: center;
        padding-bottom: 24px;
        height: 65px;
        display: flex;
        justify-content: center;
    }

    .body-btn-btn {
        width: 200px;
        height: 40px;
        font-size: 14px;
        color: #fff;
        line-height: 40px;
        border-radius: 10px;
    }

    .body-btn-btn:hover {
        color: #fff;
    }

    .body-btn-wx {

        background: #4dbe2e;
        ;
    }

    .body-btn-xcx {

        background: #605ab0;
    }

    .body-btn-h5 {

        background: #fb6b40;
    }

    .body-btn-app {
        background: #51a4ff;
    }

    .list-con-header-zfu,
    .body-btn-zfb {
        background: rgba(68, 180, 244, 1);
    }

    .list-con-header-ye,
    .body-btn-ye {
        background: rgba(252, 142, 79, 1);
    }

    .list-con-header-Apple,
    .body-btn-Apple {
        background: #837ce1;
    }
    .list-con-posi-center>div {
        display: flex;
        align-items: center;
    }

    .list-con-posi {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        padding: 20px 40px;
        box-sizing: border-box;
    }

    .list-con-posi-center-title {
        color: rgba(255, 255, 255, 1);
        font-size: 26px;
        text-align: left;
    }

    .list-con-posi-center-status {
        line-height: 34px;
        opacity: 0.8;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.4);
        border-radius: 16px;
        font-size: 14px;
        text-align: center;
        margin-left: 24px;
        display: block;
        width: 78px;
        height: 34px;



    }

    .list-con-posi-center-msg {
        /* line-height: 30px; */
        color: rgba(255, 255, 255, 1);
        text-align: left;
    }

    .list-con-posi-right {
        color: rgba(255, 255, 255, 1);
        font-size: 18px;
        text-align: left;
        line-height: 30px;
    }

    .set-btn {
        color: #fff;
        font-size: 22px;
    }

    @media (max-width: 1400px) {
        .list-con-posi {

            padding: 20px;
        }

        .list-con-posi-center-title {
            font-size: 16px;
            line-height: 20px;
        }

        .list-con-posi-center-status {
            font-size: 10px;
            width: 57px;
            height: 20px;
            line-height: 20px;

        }

        .list-con-posi-center-msg {
            font-size: 12px;
            line-height: 18px;
        }

        .list-con-posi-right {
            font-size: 12px;
        }

        .set-btn {
            color: #fff;
            font-size: 12px;
        }

    }

    @media (max-width: 375px) {
        .edit-form tr td input {
            width: 100%;
        }

        .edit-form tr th:first-child,
        .edit-form tr td:first-child {
            width: 20%;
        }

        .edit-form tr th:nth-last-of-type(-n+2),
        .edit-form tr td:nth-last-of-type(-n+2) {
            display: none;
        }
    }
    .edit-form table>tbody>tr td a.btn-delcfg {
        visibility: hidden;
    }
    .edit-form table>tbody>tr:hover td a.btn-delcfg {
        visibility: visible;
    }
    .border-radius-tdleft {
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        vertical-align: middle !important;


    }
    .border-radius-tdright {
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        vertical-align: middle !important;

    }
    tr {
        border-radius: 10px;
    }

    a:focus {
        color: #fff;
    }
</style>
<div class="panel panel-default panel-intro">
    <div class="panel-heading">
        {:build_heading(null, false)}
        <ul class="nav nav-tabs">
            <li class="active" data-toggle="tooltip" title="基础配置">
                <a href="#basics" data-toggle="tab">基础配置</a>
            </li>
            <li data-toggle="tooltip" title="平台配置">
                <a href="#channel" data-toggle="tab">平台配置</a>
            </li>
            <li data-toggle="tooltip" title="支付配置">
                <a href="#pays" data-toggle="tab">支付配置</a>
            </li>
            <li data-toggle="tooltip" title="{:__('Add new config')}">
                <a href="#addcfg" data-toggle="tab"><i class="fa fa-plus"></i></a>
            </li>
        </ul>
    </div>

    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="basics">
                <div class="row list-con col-xs-6 col-sm-6  col-md-3 col-lg-3">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="list-con-header list-con-header-info">
                            <div class="title">
                                <div><span>商城信息</span></div>
                            </div>
                            <div class="list-con-posi-center-msg">配置商城信息</div>
                            <img class="title-img" src="/assets/img/shopro/info.png" alt="" srcset="">
                        </div>
                        <div class="list-con-body">
                            <div class="body-con">快来设置吧</div>
                            <div class="body-btn">
                                <a class="body-btn-btn list-con-header-info btn-dialog" title="商城信息配置"
                                    href="{:url('shopro.config/platform?type=shopro')}">设置</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row list-con col-xs-6 col-sm-6  col-md-3 col-lg-3">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="list-con-header list-con-header-share">
                            <div class="title">
                                <div><span>分享设置</span></div>
                            </div>
                            <div class="list-con-posi-center-msg">配置分享设置</div>
                            <img class="title-img" src="/assets/img/shopro/set.png" alt="" srcset="">
                        </div>
                        <div class="list-con-body">
                            <div class="body-con">快来设置吧</div>
                            <div class="body-btn ">
                                <a class="body-btn-btn list-con-header-share btn-dialog" title="分享设置"
                                    href="{:url('shopro.config/platform?type=share')}">设置</a>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="row list-con col-xs-6 col-sm-6  col-md-3 col-lg-3">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="list-con-header list-con-header-score">
                            <div class="title">
                                <div><span>积分配置</span></div>
                            </div>
                            <div class="list-con-posi-center-msg">积分配置</div>
                            <img class="title-img" src="/assets/img/shopro/score.png" alt="" srcset="">
                        </div>
                        <div class="list-con-body">
                            <div class="body-con">快来设置吧</div>
                            <div class="body-btn ">
                                <a class="body-btn-btn list-con-header-score btn-dialog" title="积分配置"
                                    href="{:url('shopro.config/platform?type=score')}">设置</a>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="row list-con col-xs-6 col-sm-6  col-md-3 col-lg-3">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="list-con-header list-con-header-withdraw">
                            <div class="title">
                                <div><span>提现配置</span></div>
                            </div>
                            <div class="list-con-posi-center-msg">提现配置</div>
                            <img class="title-img" src="/assets/img/shopro/Withdraw.png" alt="" srcset="">
                        </div>
                        <div class="list-con-body">
                            <div class="body-con">快来设置吧</div>
                            <div class="body-btn ">
                                <a class="body-btn-btn list-con-header-withdraw btn-dialog" title="提现配置"
                                    href="{:url('shopro.config/platform?type=withdraw')}">设置</a>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="channel">
                <div class="row list-con col-xs-6 col-sm-6  col-md-3 col-lg-3">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="list-con-header">
                            <div class="title">
                                <div><span>微信公众号</span></div>
                            </div>
                            <div class="list-con-posi-center-msg">一键绑定微信公众号</div>
                            <img class="title-img" src="/assets/img/shopro/wx_logo.png" alt="" srcset="">
                        </div>
                        <div class="list-con-body">
                            <div class="body-con"> 快来设置吧</div>                          
                            <div class="body-btn">
                                <a class="body-btn-btn body-btn-wx btn-dialog" title="公众号设置"
                                    href="{:url('shopro.config/platform?type=wxOfficialAccount')}">公众号设置</a>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="row list-con col-xs-6 col-sm-6  col-md-3 col-lg-3">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="list-con-header list-con-header-xcx">
                            <div class="title">
                                <div><span>小程序</span></div>
                            </div>
                            <div class="list-con-posi-center-msg">绑定微信小程序，快速开通商城</div>
                            <img class="title-img" src="/assets/img/shopro/xcx_logo.png" alt="" srcset="">
                        </div>
                        <div class="list-con-body">
                            <div class="body-con"> 快来设置吧</div>
                            <div class="body-btn ">
                                <a class="body-btn-btn body-btn-xcx btn-dialog" title="小程序设置"
                                    href="{:url('shopro.config/platform?type=wxMiniProgram')}">小程序设置</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row list-con col-xs-6 col-sm-6  col-md-3 col-lg-3">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

                        <div class="list-con-header list-con-header-h5">
                            <div class="title">
                                <div><span>H5</span></div>
                            </div>
                            <div class="list-con-posi-center-msg">设置H5平台</div>
                            <img class="title-img" src="/assets/img/shopro/h5_logo.png" alt="" srcset="">
                        </div>
                        <div class="list-con-body">
                            <div class="body-con"> 手机浏览器也可以使用商城，快来设置吧</div>
                            <div class="body-btn ">
                                <a class="body-btn-btn body-btn-h5 btn-dialog" title="H5设置"
                                    href="{:url('shopro.config/platform?type=H5')}">H5设置</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row list-con col-xs-6 col-sm-6  col-md-3 col-lg-3">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="list-con-header list-con-header-app">
                            <div class="title">
                                <div><span>App</span></div>
                            </div>
                            <div class="list-con-posi-center-msg">生成APP,实现多端同步使用</div>
                            <img class="title-img" src="/assets/img/shopro/app_logo.png" alt="" srcset="">
                        </div>
                        <div class="list-con-body">
                            <div class="body-con">
                                立刻拥有自己的专属APP</div>
                            <div class="body-btn">
                                <a class="body-btn-btn body-btn-app btn-dialog" title="APP设置"
                                    href="{:url('shopro.config/platform?type=App')}">APP设置</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="pays">
                <div class="row list-con col-xs-6 col-sm-6  col-md-3 col-lg-3">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="list-con-header">
                            <div class="title">
                                <div><span>微信支付</span></div>
                            </div>
                            <img class="title-img" src="/assets/img/shopro/wxzf_logo.png" alt="" srcset="">
                        </div>
                        <div class="list-con-body list-con-bodyzf">
                            <div class="body-btn">
                                <a class="body-btn-btn body-btn-wx btn-dialog" title="微信支付设置"
                                    href="{:url('shopro.config/platform?type=wechat')}">设置</a>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="row list-con col-xs-6 col-sm-6  col-md-3 col-lg-3">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="list-con-header list-con-header-zfu">
                            <div class="title">
                                <div><span>支付宝支付</span></div>
                            </div>
                            <img class="title-img" src="/assets/img/shopro/zfb_logo.png" alt="" srcset="">
                        </div>
                        <div class="list-con-body list-con-bodyzf">
                            <div class="body-btn ">
                                <a class="body-btn-btn body-btn-zfb btn-dialog" title="支付宝支付设置"
                                    href="{:url('shopro.config/platform?type=alipay')}">设置</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row list-con col-xs-6 col-sm-6  col-md-3 col-lg-3">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

                        <div class="list-con-header list-con-header-ye">
                            <div class="title">
                                <div><span>余额</span></div>

                            </div>
                            <img class="title-img" src="/assets/img/shopro/ye_logo.png" alt="" srcset="">
                        </div>
                        <div class="list-con-body list-con-bodyzf">
                            <div class="body-btn ">
                                <a class="body-btn-btn body-btn-ye btn-dialog" title="余额设置"
                                    href="{:url('shopro.config/platform?type=wallet')}">设置</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row list-con col-xs-6 col-sm-6  col-md-3 col-lg-3">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

                        <div class="list-con-header list-con-header-Apple">
                            <div class="title">
                                <div><span>Apple Pay</span></div>
                            </div>
                            <img class="title-img" src="/assets/img/shopro/applepay.png" alt="" srcset="">
                        </div>
                        <div class="list-con-body list-con-bodyzf">
                            <div class="body-btn">
                                <a class="body-btn-btn body-btn-Apple">暂未开放</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="addcfg">
                <form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST"
                    action="{:url('shopro.config/add')}">
                    {:token()}
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('Type')}:</label>
                        <div class="col-xs-12 col-sm-4">
                            <select name="row[type]" class="form-control selectpicker">
                                {foreach name="typeList" item="vo"}
                                <option value="{$key}" {in name="key" value="string" }selected{/in}>{$vo}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">{:__('Group')}团队:</label>
                        <div class="col-xs-12 col-sm-4">
                            <select name="row[group]" class="form-control selectpicker">
                                {foreach name="groupList" item="vo"}
                                <option value="{$key}" {in name="key" value="basic" }selected{/in}>{$vo}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="name" class="control-label col-xs-12 col-sm-2">{:__('Name')}:</label>
                        <div class="col-xs-12 col-sm-4">
                            <input type="text" class="form-control" id="name" name="row[name]" value=""
                                data-rule="required; length(3~30); remote(shopro/config/check)" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="title" class="control-label col-xs-12 col-sm-2">{:__('Title')}:</label>
                        <div class="col-xs-12 col-sm-4">
                            <input type="text" class="form-control" id="title" name="row[title]" value=""
                                data-rule="required" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="value" class="control-label col-xs-12 col-sm-2">{:__('Value')}:</label>
                        <div class="col-xs-12 col-sm-4">
                            <input type="text" class="form-control" id="value" name="row[value]" value=""
                                data-rule="" />
                        </div>
                    </div>
                    <div class="form-group hide" id="add-content-container">
                        <label for="content" class="control-label col-xs-12 col-sm-2">{:__('Content')}:</label>
                        <div class="col-xs-12 col-sm-4">
                            <textarea name="row[content]" id="content" cols="30" rows="5" class="form-control"
                                data-rule="required(content)">value1|title1
        value2|title2</textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="tip" class="control-label col-xs-12 col-sm-2">{:__('Tip')}:</label>
                        <div class="col-xs-12 col-sm-4">
                            <input type="text" class="form-control" id="tip" name="row[tip]" value="" data-rule="" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="rule" class="control-label col-xs-12 col-sm-2">{:__('Rule')}:</label>
                        <div class="col-xs-12 col-sm-4">
                            <div class="input-group pull-left">
                                <input type="text" class="form-control" id="rule" name="row[rule]" value=""
                                    data-tip="{:__('Rule tips')}" />
                                <span class="input-group-btn">
                                    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
                                        type="button">{:__('Choose')}</button>
                                    <ul class="dropdown-menu pull-right rulelist">
                                        {volist name="ruleList" id="item"}
                                        <li><a href="javascript:;" data-value="{$key}">{$item}<span
                                                    class="text-muted">({$key})</span></a></li>
                                        {/volist}
                                    </ul>
                                </span>
                            </div>
                            <span class="msg-box n-right" for="rule"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="extend" class="control-label col-xs-12 col-sm-2">{:__('Extend')}:</label>
                        <div class="col-xs-12 col-sm-4">
                            <textarea name="row[extend]" id="extend" cols="30" rows="5" class="form-control"
                                data-tip="{:__('Extend tips')}" data-rule="required(extend)"
                                data-msg-extend="当类型为自定义时,扩展属性不能为空"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2"></label>
                        <div class="col-xs-12 col-sm-4">
                            <button type="submit" class="btn btn-success btn-embossed">{:__('OK')}</button>
                            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
